CSSの基本(10)−背景画像の表示位置を指定する
今週は、背景画像の位置をCSSで指定する方法を紹介します。CSSでは、背景画像を上下左右のどの位置に配置するかを指定することが可能です。そのほか、画面をスクロールさせたときに、背景画像だけをスクロールさせずに固定するプロパティも用意されています。

→ 背景画像の位置を指定する
 
背景画像の位置は、background-positionプロパティで指定します。ただし、背景画像が縦横に繰り返されている場合は、その効果をあまり実感できません。そこで、background-repeatプロパティに「no-repeat」を指定し、背景の繰り返しを禁止するのが一般的です。背景画像の位置は、横方向・縦方向の順に半角スペースで区切って指定します。横方向の指定は「left」(左)、「center」(中央)、「right」(右)のいずれかで指定します。同様に、縦方向は「top」(上)、「center」(中央)、「bottom」(下)のいずれかで指定します。以下は、中央・上の位置に背景画像を繰り返さずに配置した場合のサンプルです。
<STYLE type="text/css">
BODY{
    color:#FFFFFF;
    text-align:center;
    background-color:#000000;
    background-image:url(backimage.jpg);
    background-repeat:no-repeat;
    background-position:center top;
}
    :
    :
</STYLE>
サンプルページ


→ 背景画像の位置を指定して繰り返す
 
背景画像を縦方向(または横方向)だけに繰り返す場合も、background-positionプロパティが効果的に機能する場合もあります。たとえば、以下のサンプルは背景画像を縦方向だけに繰り返し、その配置を右に指定した例です。なお、background-positionプロパティの値は「right top」(右・上)となっていますが、これはウィンドウ右上を基準に背景画像を繰り返すことを意味しています。
<STYLE type="text/css">
BODY{
    color:#FFFFFF;
    text-align:center;
    background-color:#000000;
    background-image:url(backimage.jpg);
    background-repeat:repeat-y;
     background-position:right top;
}
    :
    :
</STYLE>
サンプルページ


→ 背景画像の位置を固定する
 
通常、ホームページをスクロールさせると、それと一緒に背景画像もスクロールします。一方、背景画像をウィンドウに固定し、ページ内容だけをスクロールさせることも可能です。この場合に利用するのがbackground-attachmentプロパティであり、その値には「fixed」を指定します。以下に、そのサンプルを示しておくので、実際の動作を確認してみてください。もちろん、background-attachmentプロパティを、background-repeat(繰り返し)やbackground-position(位置指定)と同時に指定することも可能です。この場合、背景画像を右上に固定するなど、ユニークな演出を実現できるようになります。
<STYLE type="text/css">
BODY{
    color:#FFFFFF;
    text-align:center;
    background-color:#000000;
    background-image:url(back.jpg);
    background-attachment:fixed;
}
    :
    :
</STYLE>
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze